<template>
  <view class="title"> 当期课程 </view>

  <scroll-view scroll-x class="scroll">
    <view v-for="item in httpActiveList" :key="item.id" class="card new" @click="onGoLesson(item)">
      <view class="card-image">
        <uv-image
          :src="item.video.cover || (isFileType(item.video.address) === 'image' ? item.video.address : defaultImagesList[random])"
          height="100%"
          width="100%"
        ></uv-image>
      </view>
      <view class="card-dance">
        {{ item.lesson.danceType }}
      </view>
    </view>
    <uv-empty v-if="!httpActiveList.length"></uv-empty>
  </scroll-view>
  <view class="line">
    <uv-line color="#545454"></uv-line>
  </view>
  <view class="title"> 往期课程 </view>
  <view class="lesson">
    <view v-for="item in httpList" :key="item.id" class="card" @click="onGoLesson(item)">
      <view class="card-image">
        <uv-image
          :src="item.video.cover || (isFileType(item.video.address) === 'image' ? item.video.address : defaultImagesList[random])"
          height="100%"
          width="100%"
        ></uv-image>
      </view>
      <view class="card-dance">
        {{ item.lesson.danceType }}
      </view>
    </view>
    <view class="lesson-empty">
      <uv-empty v-if="!httpList.length"></uv-empty>
    </view>
  </view>
  <uv-toast ref="toastRef"></uv-toast>
</template>

<script setup>
  import { ref, reactive, defineProps, defineExpose, watch, nextTick } from 'vue';
  import { checkStatus, defaultImagesList } from '@/common/js/global.js';
  import { isFileType, suiji } from '@/common/js/fn';
  let random = ref(0);
  const toastRef = ref();

  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    state: 'expired', //all 全部 expired 过期的 active 未过期的
    approved: 'access' //all 全部 access 审核通过 reject 审核不通过
  });

  let props = defineProps({
    current: {
      type: Number,
      default: -1
    },
    teacherId: {
      type: Number,
      default: 0
    }
  });
  // 监听父元素传参
  watch(
    () => props.current,
    val => {
      if (val !== 0) return;
      nextTick(() => {
        httpData();
        httpActive();
      });
    },
    { immediate: true }
  );
  let httpActiveList = ref([]);
  const httpActive = async (reset = true) => {
    let data = await uni.$uv.http.post('/app/teacher/self_lessons', {
      pageSize: 999,
      currentPage: 1,
      state: 'active',
      approved: 'access',
      id: props.teacherId
    });
    httpActiveList.value = data.timetables.map(r => {
      return {
        ...r,
        approvedStauts: checkStatus[r.approved]
      };
    });
  };
  let httpList = ref([]);
  let isScroll = ref(true);

  const httpData = async (reset = true) => {
    random.value = await suiji(0, defaultImagesList.length - 1);
    let options = JSON.parse(JSON.stringify(params));
    options.id = props.teacherId;
    let { timetables, pagination } = await uni.$uv.http.post('/app/teacher/self_lessons', options);
    let list = timetables.map(r => {
      return {
        ...r,
        approvedStauts: checkStatus[r.approved]
      };
    });
    if (reset) {
      httpList.value.splice(0, httpList.value.length, ...list);
    } else {
      httpList.value.push(...list);
    }
    isScroll.value = httpList.value.length < pagination.total;
  };

  // 触发子组件更新事件
  const sonChange = () => {
    if (!isScroll.value) return;
    params.currentPage++;
    httpData(false);
  };
  // 前往课程详情
  const onGoLesson = val => {
    uni.$uv.route({
      url: '/pages/main/course',
      params: {
        id: val.id
      }
    });
  };
  defineExpose({ sonChange });
</script>

<style lang="scss" scoped>
  .line {
    padding: 0 26rpx;
    margin-top: 26rpx;
  }
  .title {
    font-size: 28rpx;
    color: #b1b1b1;
    padding: 26rpx;
  }
  .lesson {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 26rpx;
    box-sizing: border-box;
    &-empty {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
  .scroll {
    white-space: nowrap;
    width: 100%;
    padding: 0 26rpx;
  }
  .new {
    display: inline-block;
    width: 344rpx !important;
    margin-right: 2%;
    margin-left: 0 !important;
  }
  .card {
    font-size: 24rpx;
    position: relative;
    height: 485rpx;
    width: 49%;
    border-radius: 21rpx;
    margin-bottom: 14rpx;
    overflow: hidden;
    &-image {
      height: 100%;
    }
    &:nth-of-type(even) {
      margin-left: 2%;
    }
    &-dance {
      position: absolute;
      padding: 0 21rpx;
      box-sizing: border-box;
      bottom: 5rpx;
      left: 9rpx;
      background-color: #1d1f24;
      height: 38rpx;
      line-height: 38rpx;
      border-radius: 24rpx;
      text-align: center;
    }
  }
</style>
